<template>
  <div class="container">
    <nav-bar title="专题活动" />
    <div class="maintain">
      <div class="tit">
        <h3>{{topic.Name}}</h3>
        <div 
          class="discrib" 
          v-if="topic.TopicModule.length"
        >
          {{topic.TopicModule[0].Name}}
        </div>
      </div>
      <img :src='topic.TopImage' />
    </div>
    <div class="products">
      <div class="list" v-if="topic.TopicModule.length">
        <!-- 为你推荐 -->
        <div 
          class="item" 
          v-for="(item, index) in topic.TopicModule[0].TopicModelProduct" 
          :key="index"
          @click="goToProduct(item.Id)"
        >
          <div class="img"><img :src='item.Image' /></div>
          <div class="name">{{item.Name}}</div>
          <!-- <div class="dis">提臀瑜伽裤侧边品牌</div> -->
          <div class="price">
            <h3>¥<span>{{item.Price}}</span></h3>
            <h4>¥{{item.MarketPrice}}</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getTopicDetail } from '../../network/best'
export default {
  name: 'Discount',
  components: {
    NavBar
  },
  data(){
    return {
      topic: {
        TopicModule: []
      }
    }
  },
  mounted() {

    let requestData = {
      id: this.$route.query.id
    }
    getTopicDetail(requestData, topic => {
      // console.log(topic)
      console.log(topic.TopicModule[0].TopicModelProduct)
      this.topic = topic
      topic.TopicModule[0].TopicModelProduct = 
      topic.TopicModule[0].TopicModelProduct.map(item => {
        item.MarketPrice = item.MarketPrice.toFixed(2)
        item.Price = item.Price.toFixed(2)
        return item
      })
    })
  },
  methods: {
    search(){
      
    },
    goToProduct(id){
      this.$router.push({
        path: '/product',
        query: {
          id,
        }
      })
    },
  },
}
</script>

<style scoped>
.maintain{
  /* padding: 30px 20px 40px 20px; */
  /* color: #ffffff; */
  background: #000000;
}
.maintain img{
  width: 100%;
}
.maintain .tit{
  padding: 15px 20px 15px 20px;
  background-color: #fff;
}
.maintain .tit h3{
  font-size: 18px;
  line-height: 1.2;
}
.maintain .tit .discrib{
  font-size: 14px;
  opacity: .6;
  padding-top: 5px;
}
.products{
  position: relative;
  padding: 10px;
  background-color: #f2f2f2;
  z-index: 2;
}
.products .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.products .list .item{
  width: 49%;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}
.products .list .item .img{
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.products .list .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px 6px 0 0;
}
.products .list .item .name{
  font-size: 14px;
  height: 45px;
  margin-bottom: 2px;
  padding: 8px 10px 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.products .list .item .dis{
  font-size: 14px;
  color: #8c8c8c;
  padding: 0 10px 5px 10px;
}
.products .list .item .price{
  display: flex;
  align-items: flex-end;
  padding: 3px 10px 20px 10px;
}
.products .list .item .price h3{
  color: #d50721;
  padding-right: 15px;
}
.products .list .item .price h3 span{
  font-size: 18px;
  padding: 3px;
}
.products .list .item .price h4{
  color: #8c8c8c;
  text-decoration: line-through;
}
</style>